<template>
    <div class="userCenter">
        <assets-head :goHome="goHome">
            <van-icon class="font-45" @click="tokefu" :name="require(`@/assets/image/customer.png`)" :badge="`${unreadMsg_num}`">
            </van-icon>
        </assets-head>
        <div class="top" v-if="!userInfo.token">
            <div class="title textColor ">{{ $t('欢迎来到') }}{{TITLE}}</div>
            <p class="">{{ $t('全球最大的区块链资产平台') }}</p>
            <div class="btnBox">
                <div class="btn greyBg" @click="$router.push('/register')">{{ $t('注册') }}</div>
                <div class="btn btnMain" @click="$router.push('/login')">{{ $t('登录') }}</div>
            </div>
        </div>
        <div class="userInfo" v-else>
            <div class="imgBox"><img :src="require(`@/assets/theme/${THEME}/image/Group.png`)" alt=""></div>
            <div class="info">
                <p class="textColor">{{ userInfo.username }}</p>
                <span>ID:{{ userInfo.usercode }}</span>
            </div>
        </div>
        <div class="content">
            <list-box v-if="userInfo.token" :title="$t('安全')" :listData="safeList"></list-box>
            <list-box v-if="userInfo.token" :title="$t('用户')" :status="status" :listData="userList"></list-box>
            <list-box :title="$t('通用')" :listData="list">
            </list-box>
            <list-box :title="$t('更多')" :listData="moreList"></list-box>
            <div v-if="$store.state.user.userInfo.token">
                <div class="outBtn tabBackground textColor" @click="loginOut">{{ $t('退出') }}</div>
                <div class="tips">{{ $t('请不要透漏密码、短信和谷歌验证码给任何人，包括交易所的工作人员。') }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import listBox from "./listBox.vue";
import { mapGetters } from "vuex";
import { _getIdentify } from '@/API/fund.api'
import { THEME } from '@/config/theme'
import { setStorage } from '@/utils/utis'
import { _getUnreadMsg } from '@/API/im.api'
    export default {
        props: {

        },
        components: {
            assetsHead,
            listBox
        },
        computed: {
            ...mapGetters('user', ['userInfo']),
        },
        data(){
            return {
                THEME,
                goHome:true,
                status:-1,//身份认证状态
                list:[
                    {
                        name: this.$t('语言') ,
                        icon: require('@/assets/image/userCenter/yuyan.png'),
                        url:'/language'
                    },
                    {
                        name: this.$t('计价方式'),
                        icon: require('@/assets/image/userCenter/jisuan.png'),
                        url:'/exchangeRate'
                    },
                    {
                        name: this.$t('在线客服'),
                        icon: require('@/assets/image/userCenter/kefu.png'),
                        url:'/customerSelect'
                    }
                ],
                moreList:[
                    {
                        name: this.$t('帮助中心'),
                        icon: require('@/assets/image/userCenter/help.png'),
                        url: '/helpCenter'
                    },
                    {
                        name: this.$t('关于我们'),
                        icon: require('@/assets/image/userCenter/about.png'),
                        url: '/TermsOfService'
                    }
                ],
                safeList:[
                    {
                        name: this.$t('安全'),
                        icon: require('@/assets/image/userCenter/security.png'),
                        url: '/safety'
                    },
                    {
                        name: this.$t('修改密码'),
                        icon: require('@/assets/image/userCenter/password.png'),
                        url: '/changePassword'
                    }
                ],
                userList: [
                    {
                        name: this.$t('邀请推广'),
                        icon: require('@/assets/image/userCenter/share.png'),
                        url: '/promote'
                    },
                    {
                        name: this.$t('账变记录'),
                        icon: require('@/assets/image/userCenter/record.png'),
                        url: '/accountChange'
                },
                    {
                        name: this.$t('身份认证'),
                        icon: require('@/assets/image/userCenter/identity.png'),
                        url: '/certificationCenter'
                    }
                ],
                name:"", //实名认证的真实名字
                unreadMsg_num: '',
            }
        },
        mounted(){
            if (this.userInfo.token){
                this.getIdentify()
                this.fetchUnread()
            }
        },
        methods: {
            fetchUnread() { // 获取未读
                _getUnreadMsg().then(unread_num => {
                    this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
                    //console.log('\n *** \n'+unread_num*1+'\n *** \n')
                })
            },
            loginOut(){
                this.$store.commit('user/SET_OUT')
                setStorage('popNotice', false)
            },
            getIdentify(){
                _getIdentify().then(data => {   
                    this.status = data.status
                    this.name = data.name
                })
            },
            tokefu() {
                this.$router.push('/customerService')
            }
        },
        
    }
</script>

<style lang="scss" scoped>







.userCenter{
    font-size: 26px;
 width: 100%;
 box-sizing: border-box;
 overflow: hidden;
}
.top{
    padding: 0 32px;
    p {
        color: #868D9A;
    }
}
.content{
    font-size: 30px;
}
.custom {
    width: 44px;
    height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom:22px;
}
.btnBox{
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
    margin-bottom: 35px;
    .btn{
        width: 364px;
        height: 88px;
        line-height: 88px;
        font-size: 35px;
        border-radius: 8px;
        text-align: center;
    }
}
.outBtn{
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
    margin: 0 32px;
    margin-top: 44px;
}
.tips{
    color: #868D9A;
    margin-top: 34px;
    text-align: center;
    padding: 0 13%;
    display: flex;
    justify-content: center;
}
.userInfo{
    padding: 32px 32px 44px 32px;
    display: flex;
    .imgBox{
        width: 96px;
        height: 96px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .info{
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p{
            margin-bottom: 10px;
            font-size: 36px;
            font-weight: 700;
        }
        span{
            color: #868D9A;
            font-size: 22px;
        }
    }
}
</style>